<template>
	<view>
		<view class="login-up">
			<view class="login-up-title">智慧社团</view>
			<view class="login-up-switch">
				<view :class="{fontColor:check}" style="width: 300rpx;height:50rpx;text-align: center;"
					@click="check=true">
					登录</view>
				<view :class="{fontColor:!check}" style="width: 300rpx;height:50rpx;text-align: center;"
					@click="check=false">注册</view>
			</view>
		</view>
		<view class="login-down">
			<!-- 登录 -->
			<view v-if="check" style="display: flex;justify-content: center;">
				<uni-forms style="width: 80%;padding-top: 100rpx;" :value="loginRequest" ref="form" :rules="rules">
					<uni-forms-item name="phone">
						<input class="log-input" type="number" v-model="loginRequest.phone" placeholder="请输入手机号"
							placeholder-style="text-align: center;" />
					</uni-forms-item>
					<uni-forms-item name="password">
						<input class="log-input" type="password" v-model="loginRequest.password" placeholder="请输入密码"
							placeholder-style="text-align: center;" />
					</uni-forms-item>
					<navigator url="./edit" open-type="navigate" animation-type="pop-in"
						style="text-align: right;color: #666666;margin-bottom: 40rpx;">忘记密码？
					</navigator>
					<button type="primary" @click="submitForm">登录</button>
				</uni-forms>
			</view>
			<!-- 注册 -->
			<view v-else style="display: flex;justify-content: center;">
				<uni-forms style="width: 80%;padding-top: 40rpx;" :value="registerRequest" ref="registerForm"
					:rules="registerRules">
					<uni-forms-item name="name">
						<input class="log-input" type="text" v-model="registerRequest.username" placeholder="请输入用户名"
							placeholder-style="text-align: center;" />
					</uni-forms-item>
					<uni-forms-item name="password" class="remote-length">
						<input class="log-input" type="password" v-model="registerRequest.password" placeholder="请输入密码"
							placeholder-style="text-align: center;" />
					</uni-forms-item>
					<uni-forms-item name="password" class="remote-length">
						<input class="log-input" type="password" v-model="registerRequest.password2" placeholder="请确认密码"
							placeholder-style="text-align: center;" />
					</uni-forms-item>
					<uni-forms-item name="phone" class="remote-length">
						<input class="log-input" type="number" v-model="registerRequest.phone" placeholder="请输入手机号"
							placeholder-style="text-align: center;" />
					</uni-forms-item>
					<uni-forms-item class="remote-length">
						<view style="display: flex;justify-content: space-between;">
							<uni-easyinput class="log-input" type="text" v-model="registerRequest.code"
								placeholder="请输入验证码" placeholder-style="text-align: center;">
							</uni-easyinput>
							<button v-show="!timeButton"
								style="font-size: small;background-color: #808080;color: white;"
								@click="phoneCheck">发送验证码</button>
							<button v-show="timeButton" style="font-size: small;background-color: #808080;color: white;"
								disabled>{{leftTime}}秒后重新获取</button>
						</view>
					</uni-forms-item>
					<button type="primary" @click="register" class="remote-length">注册</button>
				</uni-forms>
			</view>
		</view>

		<!-- 弹出层 -->
		<uni-popup ref="phone" type="center">
			<uni-popup-message type="error" message="手机号格式不正确" :duration="2000">
			</uni-popup-message>
		</uni-popup>
		<uni-popup ref="logerr" type="center">
			<uni-popup-message type="error" :message="logerr" :duration="3000">
			</uni-popup-message>
		</uni-popup>
		<uni-popup ref="logsuccess" type="center">
			<uni-popup-message type="success" :message="logsuccess" :duration="3000">
			</uni-popup-message>
		</uni-popup>
		<uni-popup ref="pwddiff" type="center">
			<uni-popup-message type="warning" message="两次密码不一致" :duration="3000">
			</uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginRequest: {
					password: '',
					phone: ''
				},
				registerRequest: {
					"code": '',
					"password": '',
					"password2": '',
					"phone": '',
					"username": ''
				},
				check: true,
				// 控制倒计时按钮和点击按钮的切换
				timeButton: false,
				leftTime: 120,
				timeButton2: false,
				logerr: null,
				logsuccess: null,
				// 登录规则
				rules: {
					// 对name字段进行必填验证
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}]
					}
				},
				// 注册规则
				registerRules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号不能为空'
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空'
						}]
					}
				}
			}
		},
		methods: {
			// 登陆
			submitForm() {
				this.$refs.form.submit().then(res => {
					// 手机号正则
					if (!res.phone.match(/^[1]([3-9])[0-9]{9}$/)) {
						this.$refs.phone.open()
						return
					}
					// 发送登录请求
					this.$http.request({
						url: '/organizations/web/user/login',
						method: 'POST',
						data: this.loginRequest,
						authType: 'NONE'
					}).then(res => {
						if (res.data.result) {
							// 返回的token存到本地
							uni.setStorageSync("lhamster_identity_info", res.data.data)
							// 跳转到登录页
							uni.switchTab({
								url: '../index/index'
							});
						} else {
							this.logerr = res.data.msg
							this.$refs.logerr.open()
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 发送验证码
			phoneCheck() {
				if (this.registerRequest.phone == null || this.registerRequest.phone == '') {
					this.logerr = "手机号不能为空"
					this.$refs.logerr.open()
					return
				}
				// 手机号正则
				if (!this.registerRequest.phone.match(/^[1]([3-9])[0-9]{9}$/)) {
					this.$refs.phone.open()
					return
				}
				// 发送请求
				this.$http.request({
					url: '/organizations/web/user/message',
					method: 'POST',
					authType: 'NONE',
					data: {
						'phone': this.registerRequest.phone,
						'type': 0
					}
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.timeButton = true
						// 倒计时120s
						var that = this
						var myInterval = setInterval(function() {
							that.leftTime--
						}, 1000)
						setTimeout(function() {
							// 停止倒计时
							clearInterval(myInterval)
							// 初始化剩余时间
							that.leftTime = 120
							// 隐藏时间按钮
							that.timeButton = false
						}, 120000)
						this.logsuccess = res.msg
						this.$refs.logsuccess.open()
					} else {
						this.logerr = res.msg
						this.$refs.logerr.open()
					}
				}).catch(res => {
					res = res.data;
					this.logerr = "请求失败"
					this.$refs.logerr.open()
				})
			},
			// 注册
			register() {
				this.$refs.registerForm.submit().then(res => {
					// 检查两次密码是否一致
					if (this.registerRequest.password !== this.registerRequest.password2) {
						this.$refs.pwddiff.open()
						return
					}
					// 手机号正则
					if (!(/^[1]([3-9])[0-9]{9}$/.test(this.registerRequest.phone))) {
						this.$refs.phone.open()
						return
					}
					// 发送注册请求
					this.$http.request({
						url: '/organizations/web/user/register',
						method: 'POST',
						data: this.registerRequest,
						authType: 'NONE'
					}).then(res => {
						res = res.data;
						// 成功 -> 提示注册成功 -> 跳转到登录页
						if (res.result) {
							//  清空表单信息
							this.registerRequest.username = null;
							this.registerRequest.phone = null;
							this.registerRequest.password = null;
							this.registerRequest.password2 = null;
							this.registerRequest.code = null;
							this.logsuccess = res.msg
							this.$refs.logsuccess.open();
						} else {
							this.logerr = res.msg;
							this.$refs.logerr.open();
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style>
	.login-up {
		width: 100%;
		height: 700rpx;
		background-size: cover;
		background-image: url(../../static/images/loginBackground.png);
	}

	.login-up-title {
		width: 100%;
		padding-top: 50rpx;
		text-align: center;
		color: white;
		font-size: 45rpx;
		font-weight: 100;
	}

	.login-up-switch {
		display: flex;
		justify-content: space-around;
		margin-top: 520rpx;
		font-weight: bolder;
		background-color: transparent;
	}

	.log-input {
		border-bottom: 1px solid #C0C0C0;
	}

	.fontColor {
		color: white;
	}

	.remote-length {
		margin-top: -10rpx;
	}
</style>
